<template>
	<view>
		<view class="u-skeleton">
			<view v-for="index in 10" :key="index">
				<view class="article-item-container">
					<view class="user-info">
						<u-image class="avatar u-skeleton-circle" height="60" width="60" shape="circle">
						</u-image>
						<text class="name u-skeleton-rect">author</text>
						<text class="time u-skeleton-rect">niceDate</text>
					</view>
					<text class="title u-skeleton-rect">article.title</text>
				
					<view class="info">
						<text class="top  u-skeleton-rect" >置顶</text>
						<text class="chapter-name u-skeleton-rect">chapterName</text>
						<view class="heart u-skeleton-rect">
							<u-icon name="heart" color="red" size="40" />
						</view>
					</view>
					
					<view class="parting">
					</view>
				</view>
			</view>
			<u-skeleton :loading="true" :animation="true" bgColor="#FFF" />
		</view>
		
	
	</view>
</template>

<script>
	// import uImage from "uview-ui/components/u-image/u-image.vue"
	export default {
		name: "article-item-skeleton",
	}
</script>

<style lang="scss" scoped>
	$margin-value:10rpx;

	.article-item-container {
		display: flex;
		flex-direction: column;
		padding: 35rpx 20rpx;
		width: 100%;
	}

	// 用户信息与发布时间
	.user-info {
		position: relative;
		display: flex;
		align-items: center;

		.avatar {
			border-radius: 50%;
		}

		.name {
			margin-left: $margin-value;
			width: 100rpx;
		}

		.time {
			position: absolute;
			right: 0;
			text-align: right;
			width: 150rpx;
		}
	}

	.title {
		margin: 20rpx $margin-value;
		height: 100rpx;
	}

	//文章信息栏
	.info {
		position: relative;
		display: flex;
		align-items: center;

		.top {
			font-size: 20rpx;
			padding: 5rpx 10rpx;
			border-radius: 5rpx;
		}

		.chapter-name {
			margin-left: $margin-value;
		}

		.heart {
			position: absolute;
			right: 0;
		}
	}
</style>
